<template>
  <span>
    <span v-if="hour !== 0">{{ hour }}:</span>{{ minuteText }}:{{ secondText }}
  </span>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  duration: number; // 秒数
}

const props = defineProps<Props>();

// 计算小时
const hour = computed(() => Math.floor(props.duration / 3600));

// 计算分钟
const minute = computed(() => Math.floor((props.duration % 3600) / 60));

// 计算秒
const second = computed(() => props.duration % 60);

// 补零显示
const minuteText = computed(() => (minute.value >= 10 ? minute.value : "0" + minute.value));
const secondText = computed(() => (second.value >= 10 ? second.value : "0" + second.value));
</script>

<style scoped>
</style>
